<script setup>
	// 关闭弹窗方法  子组件调用父组件的方法
	let emit = defineEmits()
</script>

<template>
	<view class="service-panel">
		<!-- 关闭按钮 -->
		<!-- <text class="close icon-close"></text> -->
		<uni-icons @click="emit('close')" class="popupx" type="closeempty" size="20"></uni-icons>
		<!-- 标题 -->
		<view class="title">服务说明</view>
		<!-- 内容 -->
		<view class="content">
			<view class="item">
				<view class="dt">无忧退货</view>
				<view class="dd">
					自收到商品之日起30天内，可在线申请无忧退货服务（食品等特殊商品除外）
				</view>
			</view>
			<view class="item">
				<view class="dt">快速退款</view>
				<view class="dd">
					收到退货包裹并确认无误后，将在48小时内办理退款，
					退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账
				</view>
			</view>
			<view class="item">
				<view class="dt">满88元免邮费</view>
				<view class="dd">
					单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.service-panel {
		padding: 0 30rpx;
		border-radius: 10rpx 10rpx 0 0;
		position: relative;
		background-color: #fff;
		
		.popupx{
			float: right;
			padding-top: 30rpx;
		}
	}

	.title {
		line-height: 1;
		padding: 40rpx 0;
		text-align: center;
		font-size: 32rpx;
		font-weight: normal;
		border-bottom: 1rpx solid #ddd;
		color: #444;
	}

	.close {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
	}

	.content {
		padding: 20rpx 20rpx 100rpx 20rpx;

		.item {
			margin-top: 20rpx;
		}

		.dt {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			position: relative;

			&::before {
				content: '';
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #eaeaea;
				transform: translateY(-50%);
				position: absolute;
				top: 50%;
				left: -20rpx;
			}
		}

		.dd {
			line-height: 1.6;
			font-size: 26rpx;
			color: #999;
		}
	}
</style>